<template>
  <div class="experience">
    <div class="ex" v-for="(item,index) in exList" :key="index">
      <div class="ex-time">
        <p>{{item.timeStr}}</p>
        <p>{{item.address}}</p>
      </div>
      <div class="ex-content">
        {{item.experienceExplain}}
      </div>
    </div>

  </div>
</template>

<script>
import {addExperience, delExperience, putResume} from "@/api/resume";

export default {
  name: "experience",
  props:["exList","resumeId"],
  data(){
    return{
      content: '',
      time:'',
      company:'',
      isAdd:false,
      experience:{
        address:'',
        experienceExplain:'',
        timeStr:'',
        resumeId:this.resumeId
      }
    }
  },
  watch:{
    // exList:function (){
    //   putResume({experienceList:this.exList}).then(res=>{
    //     console.log(res)
    //   })
    // }
  },
  methods:{
    saveHandle(){
      if (this.experience.experienceExplain.length<=30){
        this.$message.warning('字数需要大于30字~')
        return
      }
      const add=async ()=>{
        let time=this.experience.timeStr
        this.experience.timeStr=this.timeTransform(time[0],time[1])
        const res=await addExperience(this.experience)
        this.exList.push(res.data.extend.experience)
        this.$message.success("保存成功!")
        this.experience.address=''
        this.experience.experienceExplain=''
        this.experience.timeStr=''
      }
      add()
    },
    deleteHandle(id,index){
      delExperience(id).then(res=>{
        this.exList.splice(index,1)
        this.$message.success("删除成功!")
      })

    },
    timeTransform(min,max){
      let str1=`${min.getFullYear()}.${min.getMonth()+1}`
      let str2=`${max.getFullYear()}.${max.getMonth()+1}`
      return `${str1}-${str2}`
    }
  }
}
</script>

<style lang="stylus" scoped>
.experience
  height auto
  min-height 50px
  width 100%
  display flex
  flex-direction column
  &>.ex
    width 100%
    display flex
    flex-direction column
    border-bottom 1px dotted #ece4e4
.ex-time
  width 100%
  display flex
  justify-content space-between
  align-items center
  height 40px
.ex-content
  width 100%
.add-ex
  height 40px
  display flex
  justify-content center
  align-items center
  & i
    cursor: pointer;
    font-size 30px
    background #07c160
    border-radius 50%
    color #f7faf9
.cancel
  height 40px
  display flex
  justify-content flex-end
  align-items center
</style>
